<template>
  <scroll-view scroll-y="true" class="scroll-view">
    <!-- 轮播图 -->
    <swiper autoplay interval="3000" circular class="swiper">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item" mode="aspectFill" class="swiper-image" />
      </swiper-item>
    </swiper>
    <!-- 城市介绍 -->
    <view class="section">
      <text class="section-title">泉州介绍</text>
      <rich-text :nodes="cityIntro" class="rich-text"></rich-text>
    </view>
    <!-- 探索进度 -->
    <view class="section">
      <text class="progress-text">当前进度: {{ progress }}%</text>
      <progress :percent="progress" stroke-width="6" activeColor="#007AFF" />
    </view>
    <!-- 城市选择 -->
    <view class="section">
      <picker mode="region" @change="onRegionChange" class="picker">
        <view class="picker-text">
          当前选择: {{ selectedRegion.province }} - {{ selectedRegion.city }} - {{ selectedRegion.district }}
        </view>
      </picker>
    </view>
    <!-- 偏好设置 -->
    <view class="section">
      <view class="setting-item">
        <text class="setting-label">出行方式：</text>
        <radio-group @change="onTransportChange">
          <label v-for="(item, index) in transportOptions" :key="index">
            <radio :value="item.value" :checked="transportMode === item.value" />
            {{ item.name }}
          </label>
        </radio-group>
      </view>
      <view class="setting-item">
        <switch :checked="showRecommend" @change="onToggleRecommend" />
        <text class="setting-label">显示推荐景点</text>
      </view>
      <view class="setting-item">
        <text class="setting-label">探索半径: {{ explorationRadius }}km</text>
        <slider :value="explorationRadius" min="1" max="50" @change="onRadiusChange" />
      </view>
    </view>
    <!-- 媒体展示 -->
    <view class="section">
      <video 
        src="https://example.com/quanzhou-video.mp4" 
        controls 
        class="video"
        poster="https://example.com/video-poster.jpg"
      ></video>
    </view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [
        '/static/city1.png'
      ],
      // 城市介绍
      cityIntro: `
        <strong>海上丝绸之路起点 - 泉州</strong><br/>
        <p>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”的起点，宋元时期被誉为“东方第一大港”。</p>
        <p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>
      `,
      // 探索进度
      progress: 60,
      // 城市选择
      selectedRegion: {
        province: "福建省",
        city: "泉州市",
        district: "丰泽区"
      },
      // 偏好设置
      transportMode: "bus",
      transportOptions: [
        { name: "公交", value: "bus" },
        { name: "自驾", value: "car" },
        { name: "步行", value: "walk" }
      ],
      showRecommend: true,
      explorationRadius: 10
    };
  },
  methods: {
    onRegionChange(e) {
      const [province, city, district] = e.detail.value;
      this.selectedRegion = { province, city, district };
    },
    onTransportChange(e) {
      this.transportMode = e.detail.value;
    },
    onToggleRecommend(e) {
      this.showRecommend = e.detail.value;
    },
    onRadiusChange(e) {
      this.explorationRadius = e.detail.value;
    }
  }
};
</script>
<style>
/* 样式保持不变 */
</style>